<% layout('diylayout') %><!--加载全局布局文件-->
<% block('head').append('<link type="text/css"  rel="stylesheet"  href="/extra/diy/diy.css">') %>
<!--在这里编写你的代码-->
<!--轮播图-->
<div ng-controller="DetailCtrl">
    <div data-am-widget="slider" class="am-slider am-slider-a1 " data-am-slider='{"directionNav":false}'>
        <% if(product.picurlarray.length){%>
        <ul class="am-slides">
            <% product.picurlarray.forEach(function(item){%>
            <li>
                <img src="<%= item%>">
            </li>
            <% });%>
        </ul>
        <% }%>
    </div>

    <!--基本详情-->

    <div  class="Nicolas-baseinfo am-padding-0" data-ng-init='init(<%- JSON.stringify(product.prices)%>,<%- cartProduct.number%>)'>
        <div class="am-margin-sm" >
        <span class="">
            <%= product.intro %>
        </span>
        </div>
        <div class="am-margin-sm">
            <span >价格:</span>
            <span class='am-text-xl am-text-warning'>¥<%= product.max.grprice %> - ¥<%= product.min.grprice %></span>

        </div>
        <div class="am-progress am-margin-bottom-0 am-text-center" >
            <% product.prices.forEach(function(price){%>
            <div class="am-fl"  style="width: <%= 100/product.prices.length %>%"><%=price.grprice%>/件</div>
            <!--<div class="am-fl"  style="width: 35%">48/件</div>-->
            <!--<div class="am-fl"  style="width: 45%">55/件</div>-->
            <%})%>
        </div>
        <div class="am-progress">
            <% product.prices.forEach(function(price,index){%>
            <div class="am-progress-bar <%= index%2 ==0?"am-progress-bar-success":""%>"  style="width:<%= 100/product.prices.length %>%"><%=price.name%></div>
            <%})%>
        </div>
        <div class="am-margin-sm">
            <span >购买数量：</span>
            <div class="display-inline-block float-right shop-cnt" style="top:-10px;position:relative;">
                <span class="minus text-center font-size-36p white detail-minus"
                      ng-click="sub()">-</span>
                <span class=" text-center  shop-num color-FF6F2E">
                    <span class="detail-datasize" ng-bind="data.size"></span>
                    </span>
                <span class="plus text-center font-size-36p white detail-plus"
                      ng-click="plus()">+</span>
            </div>
        </div>
        <!--<div class="am-margin-sm">-->
            <!--<span>库存：<%= product.inventory %></span>-->
        <!--</div>-->

    </div>
    <!--图文详情及评价-->
    <div data-tab-panel-0 class="am-tab-panel am-active am-padding-0 media-content">
        <%- product.content %>
    </div>

    <!---启用底部navbar-->
    <div data-am-widget="navbar" class="am-navbar am-cf am-no-layout Nicolas-navbar">
        <ul class="am-navbar-nav am-cf am-avg-sm-4">
            <div class="am-u-sm-4 am-padding-0">
                <a href="" class="">
                    <button type="button" class="am-btn am-btn-warning am-radius am-text-xs" ng-click="addToCart(<%= product.objectId %>)">加入购物车</button>
                </a>
            </div>
            <div class="am-u-sm-2 am-u-sm-offset-5 am-padding-0">
                <a href="/extra/diy/cart" class="" style="position:relative;">
                <span class="am-icon-cart-plus">
                    <b style="background: red no-repeat -300px 0; position:absolute; width: 20px; height: 20px; right: -2px; top: 10px; line-height:20px; text-align:center; color:#FFFFFF; border-radius: 25px;"></b>
                </span>
                    <span class="am-navbar-label">购物车</span>
                </a>
            </div>
        </ul>
    </div>
    <!--loading 模态框-->
    <div class="am-modal am-modal-loading am-modal-no-btn" tabindex="-1" id="my-modal-loading">
        <span class="am-icon-spinner am-icon-spin"></span>
    </div>
</div>

<!--如果本页面有额外的js文件/代码需要加入到head中 使用如下代码-->
<% block('footer').append('<script src="/extra/diy/app.js"></script>') %>
